<script setup lang="ts">
import { useSubmit } from '@/views/user/use/use-submit';
import { trimBlank } from '@vc/utils';
import type { FormInstance } from 'element-plus';
import { useUserStore } from '../../../store/modules/user';
import { rsaEncryption } from '../../../utils';
import { rules, checkPwdSame, pageCfg } from '../config';
import PwdFormItem from './pwd-form-item.vue';
interface Props {
  showDialog: boolean;
  changePwdCode: string;
}

const {
  showDialog, changePwdCode
} = defineProps<Props>();

const emit = defineEmits(['update:showDialog', 'update:changePwdCode']);
const userStore = useUserStore();
// 表单数据
const formData = reactive({
  account: userStore.getUserInfo.phone,
  password: '',
  rePassword: ''
});

const ruleFormRef = ref<FormInstance>();

const { loading, handleClick } = useSubmit();

/** 提交 */
const handleSubmit = async() => {
  return await handleClick(ruleFormRef.value, {
    password: rsaEncryption.encrypt(formData.password),
    phone: trimBlank(formData.account, 'all'),
    smsVerifyCode: changePwdCode
  }, '', null, true, true).then(() => {
    close();
  }).finally(() => {
    emit('update:changePwdCode', '');
  });
};

const close = () => {
  emit('update:showDialog', false);
};
</script>

<template>
  <vc-dialog title="修改密码" :modelValue="showDialog" @close="close()"
    :height="300" :width="468">
    <div class="content">
      <div class="text-14px mb-25px">
        <span class="text-[#242934]">请输入你的新密码</span>
      </div>
      <el-form ref="ruleFormRef" :model="formData" @keypress.enter="handleSubmit">
        <pwd-form-item class="pwd-input" v-model:password="formData.password" />
        <pwd-form-item class="pwd-input" v-model:rePassword="formData.rePassword" propName="rePassword" :rules="[...rules.regForgotPwd, checkPwdSame(formData.password)]" :placeholder="pageCfg.rePwaPlaceholder" />
        <el-form-item class="fr">
          <el-button @click="emit('update:showDialog', false)">取消</el-button>
          <el-button :loading="loading" type="primary" color="#02C680" style="color:#FFFFFF;" @click="handleSubmit">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </vc-dialog>
</template>

<style lang="scss" scoped>
.content {
  padding: 20px;

  :deep(.pwd-input) {
    .vc-input {
      width: 100%;
    }
  }
}
</style>
